<template>
  <div class="page-wrap">
    <div class="machine-list">
      <div class="machine-item" v-for="machine in machineList" :key="machine.machineId">
        <div class="machine-wrap">
          <div class="machine-no">{{ machine.machineNo }}</div>
          <div class="machine-btn1" @click="openDialog(machine.machineNo)">工艺</div>
          <div class="machine-btn2">更换提醒</div>
          <div class="machine-btn3">改纺记录</div>
          <div class="machine-btn4">锭序</div>
          <div class="machine-left">左</div>
          <div class="machine-right">右</div>
          <div class="machine-variety">品种：{{ machine.varietyName }}</div>
          <div class="machine-count">支数：{{ machine.count }}</div>
          <img src="@/assets/machine.png" />
        </div>
      </div>
    </div>
    <el-dialog :title="'设置' + machineForm.machineNo" :visible.sync="dialogVisible" width="800px" top="5vh" :before-close="handleClose">
      <div class="machine-tab">
        <el-tabs v-model="machineTab">
          <el-tab-pane label="机台参数" name="jtcs"></el-tab-pane>
        </el-tabs>
        <el-button class="tab-btn" type="primary" @click="handleSubmit" size="medium">保存</el-button>
      </div>
      <div>
        <el-form ref="machineForm" :model="machineForm" size="medium">
          <table class="machine-table" width="100%">
            <tbody>
              <tr>
                <th width="200">项目</th>
                <th width="220">数据内容</th>
                <th>设定值</th>
                <th width="120">单位</th>
              </tr>
              <tr>
                <td rowspan="2">前罗拉</td>
                <td>直径</td>
                <td>
                  <el-form-item :rules="machineRules.qlazj" prop="qlazj">
                    <el-input v-model="machineForm.qlazj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>测速齿数</td>
                <td>
                  <el-form-item :rules="machineRules.qlacscs" prop="qlacscs">
                    <el-input v-model="machineForm.qlacscs"></el-input>
                  </el-form-item>
                </td>
                <td></td>
              </tr>
              <tr>
                <td rowspan="2">中罗拉</td>
                <td>直径</td>
                <td>
                  <el-form-item :rules="machineRules.zlazj" prop="zlazj">
                    <el-input v-model="machineForm.zlazj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>测速齿数</td>
                <td>
                  <el-form-item :rules="machineRules.zlacscs" prop="zlacscs">
                    <el-input v-model="machineForm.zlacscs"></el-input>
                  </el-form-item>
                </td>
                <td></td>
              </tr>
              <tr>
                <td rowspan="2">后罗拉</td>
                <td>直径</td>
                <td>
                  <el-form-item :rules="machineRules.hlazj" prop="hlazj">
                    <el-input v-model="machineForm.hlazj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>测速齿数</td>
                <td>
                  <el-form-item :rules="machineRules.hlacscs" prop="hlacscs">
                    <el-input v-model="machineForm.hlacscs"></el-input>
                  </el-form-item>
                </td>
                <td></td>
              </tr>
              <tr>
                <td rowspan="2">主轴</td>
                <td>直径</td>
                <td>
                  <el-form-item :rules="machineRules.zzzj" prop="zzzj">
                    <el-input v-model="machineForm.zzzj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>测速齿数</td>
                <td>
                  <el-form-item :rules="machineRules.zzcscs" prop="zzcscs">
                    <el-input v-model="machineForm.zzcscs"></el-input>
                  </el-form-item>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>锭带盘</td>
                <td>直径</td>
                <td>
                  <el-form-item :rules="machineRules.ddpzj" prop="ddpzj">
                    <el-input v-model="machineForm.ddpzj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>锭距</td>
                <td></td>
                <td>
                  <el-form-item :rules="machineRules.dj" prop="dj">
                    <el-input v-model="machineForm.dj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td>钢领直径</td>
                <td></td>
                <td>
                  <el-form-item :rules="machineRules.glzj" prop="glzj">
                    <el-input v-model="machineForm.glzj"></el-input>
                  </el-form-item>
                </td>
                <td>MM</td>
              </tr>
              <tr>
                <td class="mini-td">是否紧密纺</td>
                <td class="mini-td">
                  <el-radio-group v-model="machineForm.isJmf">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </td>
                <td class="mini-td"></td>
                <td class="mini-td"></td>
              </tr>
              <tr>
                <td class="mini-td">是否集落</td>
                <td class="mini-td">
                  <el-radio-group v-model="machineForm.isJl">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </td>
                <td class="mini-td"></td>
                <td class="mini-td"></td>
              </tr>
              <tr>
                <td class="mini-td">锭号排列是否环形</td>
                <td class="mini-td">
                  <el-radio-group v-model="machineForm.isHx">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </td>
                <td class="mini-td"></td>
                <td class="mini-td"></td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'MachineInfoRun',
  data() {
    return {
      machineList: [],
      dialogVisible: false,
      machineTab: 'jtcs',
      machineForm: {
        machineNo: '',
        qlazj: '27',
        qlacscs: '10',
        zlazj: '27',
        zlacscs: '16',
        hlazj: '27',
        hlacscs: '16',
        zzzj: '250',
        zzcscs: '1',
        ddpzj: '19',
        dj: '70',
        glzj: '40',
        isJmf: 1,
        isJl: 1,
        isHx: 1,
      },
      machineRules: {
        qlazj: [{ required: true, message: '前罗拉直径不能为空', trigger: 'blur' }],
        qlacscs: [{ required: true, message: '前罗拉测速齿数不能为空', trigger: 'blur' }],
        zlazj: [{ required: true, message: '中罗拉直径不能为空', trigger: 'blur' }],
        zlacscs: [{ required: true, message: '中罗拉测速齿数不能为空', trigger: 'blur' }],
        hlazj: [{ required: true, message: '后罗拉直径不能为空', trigger: 'blur' }],
        hlacscs: [{ required: true, message: '后罗拉测速齿数不能为空', trigger: 'blur' }],
        zzzj: [{ required: true, message: '主轴直径不能为空', trigger: 'blur' }],
        zzcscs: [{ required: true, message: '主轴测速齿数不能为空', trigger: 'blur' }],
        ddpzj: [{ required: true, message: '锭带盘直径不能为空', trigger: 'blur' }],
        dj: [{ required: true, message: '锭距不能为空', trigger: 'blur' }],
        glzj: [{ required: true, message: '钢领直径不能为空', trigger: 'blur' }],
      },
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    openDialog(no) {
      this.machineForm.machineNo = no
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSubmit() {
      this.dialogVisible = false
    },
    async getData() {
      this.machineList = [
        {
          id: null,
          machineId: '8605120303009',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '009',
          machineName: '009',
          spindleNum: 1200,
          spindleOrder: 'BACD',
          directionSet: 0,
          description: '0',
          fcd: '2024-07-01 08:55:08',
          lcd: '2024-07-01 16:14:02',
          workshopName: '',
          varietyName: 'R-SL 21s',
          count: '21',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303010',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '010',
          machineName: '010',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-17 09:55:10',
          lcd: '2024-08-17 09:55:10',
          workshopName: '',
          varietyName: 'R2118竹节',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303011',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '011',
          machineName: '011',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-17 09:55:19',
          lcd: '2024-08-17 09:55:19',
          workshopName: '',
          varietyName: 'R2118竹节',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303012',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '012',
          machineName: '012',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-17 09:55:26',
          lcd: '2024-08-17 09:55:26',
          workshopName: '',
          varietyName: 'R2118竹节',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303014',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '014',
          machineName: '014',
          spindleNum: 1200,
          spindleOrder: 'BACD',
          directionSet: 0,
          description: '0',
          fcd: '2024-07-12 17:56:22',
          lcd: '2024-07-12 18:21:03',
          workshopName: '',
          varietyName: '竹节R1916',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303015',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '015',
          machineName: '015',
          spindleNum: 1200,
          spindleOrder: 'BACD',
          directionSet: 0,
          description: '0',
          fcd: '2024-07-01 08:55:21',
          lcd: '2024-07-01 15:59:52',
          workshopName: '',
          varietyName: '竹节R1916',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303024',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '024',
          machineName: '024',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-16 16:55:25',
          lcd: '2024-08-16 16:55:25',
          workshopName: '',
          varietyName: 'R2118竹节',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303025',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '025',
          machineName: '025',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-16 16:55:33',
          lcd: '2024-08-16 16:55:33',
          workshopName: '',
          varietyName: 'R2118竹节',
          count: '18',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
        {
          id: null,
          machineId: '8605120303026',
          customerNo: '86051203',
          workshopNo: '03',
          machineNo: '026',
          machineName: '026',
          spindleNum: 1200,
          spindleOrder: 'ABDC',
          directionSet: 0,
          description: '',
          fcd: '2024-08-16 16:55:41',
          lcd: '2024-08-16 16:55:41',
          workshopName: '',
          varietyName: 'R-SL 21s',
          count: '21',
          screenL: null,
          screenR: null,
          slipL: null,
          slipR: null,
          abnormalL: null,
          abnormalR: null,
        },
      ]
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.machine-list {
  width: 1320px;
  margin: 0 auto;
  .machine-item {
    float: left;
    width: 50%;
    display: flex;
    justify-content: center;
    .machine-wrap {
      position: relative;
      width: 540px;
      padding-bottom: 20px;
      .machine-no {
        position: absolute;
        left: 0;
        width: 60px;
        height: 152px;
        line-height: 152px;
        text-align: center;
        font-size: 18px;
        font-style: italic;
      }
      .machine-btn1 {
        position: absolute;
        cursor: pointer;
        left: 59px;
        top: 19px;
        width: 208px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        background-color: #88abda;
      }
      .machine-btn2 {
        position: absolute;
        cursor: pointer;
        right: 59px;
        top: 19px;
        width: 208px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        background-color: #88abda;
      }
      .machine-btn3 {
        position: absolute;
        cursor: pointer;
        left: 59px;
        top: 114px;
        width: 208px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        background-color: #88abda;
      }
      .machine-btn4 {
        position: absolute;
        cursor: pointer;
        right: 59px;
        top: 114px;
        width: 208px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        background-color: #88abda;
      }
      .machine-left {
        position: absolute;
        cursor: pointer;
        left: 100px;
        top: 48px;
        font-size: 13px;
      }
      .machine-right {
        position: absolute;
        cursor: pointer;
        left: 100px;
        top: 88px;
        font-size: 13px;
      }
      .machine-variety {
        position: absolute;
        cursor: pointer;
        left: 210px;
        top: 48px;
        font-size: 13px;
      }
      .machine-count {
        position: absolute;
        cursor: pointer;
        left: 210px;
        top: 88px;
        font-size: 13px;
      }
      img {
        width: 100%;
      }
    }
  }
  &::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
}

.machine-tab {
  position: relative;
  .tab-btn {
    position: absolute;
    top: -5px;
    right: -5px;
  }
  ::v-deep .el-tabs__item {
    font-size: 16px;
  }
}

.machine-table {
  border-collapse: collapse;
  border-spacing: 0;
  th {
    border: 1px solid #ebeef5;
    height: 50px;
    padding: 0 12px;
    color: #909399;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
  }
  td {
    border: 1px solid #ebeef5;
    height: 45px;
    padding: 0 12px;
    color: #606266;
    font-size: 16px;
    text-align: left;
    ::v-deep .el-form-item {
      margin-bottom: 0;
    }
    &.mini-td {
      height: 28px;
    }
  }
}
</style>
